<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数学题练习</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            color: #333;
            text-align: center;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            font-size: 24px;
            margin-bottom: 20px;
            color: #007bff;
        }
        .stats {
            background-color: #f9f9f9;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 20px;
            font-size: 16px;
            color: #333;
            text-align: left;
            animation: fadeIn 1s ease-in-out;
        }
        .stats p {
            margin: 5px 0;
            transition: color 0.3s;
        }
        .stats p.correct {
            color: #28a745;
        }
        .stats p.wrong {
            color: #dc3545;
        }
        .question {
            font-size: 20px;
            margin-bottom: 20px;
            color: #007bff;
        }
        .options {
            margin-bottom: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .options input {
            display: none; /* 隐藏原生 radio 按钮 */
        }
        .options label {
            display: flex;
            align-items: center;
            padding: 10px 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f9f9f9;
            cursor: pointer;
            transition: background-color 0.3s, border-color 0.3s;
            width: 100%;
            max-width: 300px;
            justify-content: flex-start;
            position: relative;
        }
        .options label::before {
            content: '';
            width: 20px;
            height: 20px;
            border: 2px solid #ccc;
            border-radius: 50%;
            margin-right: 10px;
            display: inline-block;
        }
        .options input:checked + label::before {
            background-color: #007bff;
            border-color: #007bff;
        }
        .options label:hover {
            background-color: #e9e9e9;
            border-color: #007bff;
        }
        button {
            padding: 10px 20px;
            margin: 5px;
            font-size: 16px;
            cursor: pointer;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #0056b3;
        }
        .feedback, .error {
            font-size: 16px;
            margin-top: 20px;
        }
        .feedback {
            color: #28a745;
        }
        .error {
            color: #dc3545;
        }
        .confetti, .sadface {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1000;
            display: none;
            justify-content: center;
            align-items: center;
            pointer-events: none;
        }
        .confetti img, .sadface img {
            width: 100px;
            animation: confetti 2s ease-in-out;
        }
        @keyframes confetti {
            0% {
                transform: scale(0);
                opacity: 0;
            }
            50% {
                transform: scale(1.5);
                opacity: 1;
            }
            100% {
                transform: scale(1);
                opacity: 0;
            }
        }
        @keyframes fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        @media (max-width: 600px) {
            h1 {
                font-size: 20px;
            }
            .question {
                font-size: 18px;
            }
            .options label {
                font-size: 14px;
                padding: 8px 16px;
            }
            button {
                padding: 8px 16px;
                font-size: 14px;
            }
            .feedback, .error {
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="stats" class="stats">
            <p class="correct">正确次数: <span id="correctCount">0</span></p>
            <p class="wrong">错误次数: <span id="wrongCount">0</span></p>
            <p>当前答题时间: <span id="currentTime">0.00</span> 秒</p>
            <p>最快答题时间: <span id="fastestTime">-</span> 秒</p>
            <p>平均答题时间: <span id="averageTime">0.00</span> 秒</p>
        </div>
        <h1>数学题练习</h1>
        <div>
            <label><input type="checkbox" id="addition" checked onchange="generateQuestion()"> 加法 (+)</label>
            <label><input type="checkbox" id="subtraction" checked onchange="generateQuestion()"> 减法 (-)</label>
            <label><input type="checkbox" id="multiplication" checked onchange="generateQuestion()"> 乘法 (*)</label>
            <label><input type="checkbox" id="division" checked onchange="generateQuestion()"> 除法 (/)</label>
        </div>
        <div id="question" class="question"></div>
        <div id="options" class="options"></div>
        <button onclick="checkAnswer()">确认答案</button>
        <button onclick="generateQuestion()">手动重新生成新题</button>
        <button onclick="showHint()">答案提示</button>
        <div id="feedback" class="feedback"></div>
        <div id="error" class="error"></div>
        <div id="confetti" class="confetti">
            <img src="flower.png" alt="Flower">
        </div>
        <div id="sadface" class="sadface">
            <img src="error.jpg" alt="Error">
        </div>
    </div>

    <script>
        var currentQuestion = {};
        var correctOptionIndex = -1;
        var startTime;
        var correctCount = 0;
        var wrongCount = 0;
        var fastestTime = Infinity;
        var totalTime = 0;
        var questionCount = 0;
        var timerId;

        function startTimer() {
            startTime = new Date().getTime();
            timerId = setInterval(updateCurrentTime, 1000);
        }

        function stopTimer() {
            clearInterval(timerId);
        }

        function updateCurrentTime() {
            var currentTime = (new Date().getTime() - startTime) / 1000;
            document.getElementById('currentTime').innerText = currentTime.toFixed(2);
        }

        function generateQuestion() {
            var operations = [];
            if (document.getElementById('addition').checked) operations.push('+');
            if (document.getElementById('subtraction').checked) operations.push('-');
            if (document.getElementById('multiplication').checked) operations.push('*');
            if (document.getElementById('division').checked) operations.push('/');

            if (operations.length === 0) {
                alert('请选择至少一种运算类型！');
                return;
            }

            var operation = operations[Math.floor(Math.random() * operations.length)];
            var num1, num2, num3, result;

            while (true) {
                switch (operation) {
                    case '+':
                        if (Math.random() < 0.5) {
                            num1 = Math.floor(Math.random() * 50) * 2;
                            num2 = Math.floor(Math.random() * (50 - num1 / 2)) * 2;
                            result = num1 + num2;
                            num3 = null;
                        } else {
                            num1 = Math.floor(Math.random() * 50) * 2;
                            num2 = Math.floor(Math.random() * (50 - num1 / 2)) * 2;
                            num3 = Math.floor(Math.random() * (50 - num1 / 2 - num2 / 2)) * 2;
                            result = num1 + num2 + num3;
                        }
                        break;
                    case '-':
                        if (Math.random() < 0.5) {
                            num1 = Math.floor(Math.random() * 50) * 2;
                            num2 = Math.floor(Math.random() * (num1 / 2)) * 2;
                            result = num1 - num2;
                            num3 = null;
                        } else {
                            num1 = Math.floor(Math.random() * 50) * 2;
                            num2 = Math.floor(Math.random() * (num1 / 2)) * 2;
                            num3 = Math.floor(Math.random() * ((num1 - num2) / 2)) * 2;
                            result = num1 - num2 - num3;
                        }
                        break;
                    case '*':
                        num1 = Math.floor(Math.random() * 10) * 2;
                        num2 = Math.floor(Math.random() * 10) * 2;
                        result = num1 * num2;
                        num3 = null;
                        break;
                    case '/':
                        num2 = Math.floor(Math.random() * 10) * 2 + 2;
                        num1 = num2 * Math.floor(Math.random() * 10) * 2;
                        result = num1 / num2;
                        num3 = null;
                        break;
                }

                currentQuestion = { num1: num1, num2: num2, num3: num3, operation: operation, result: result };

                var questionText;
                if (operation === '+' || operation === '-') {
                    if (num3 !== null) {
                        questionText = num1 + ' ' + operation + ' ' + num2 + ' ' + operation + ' ' + num3 + ' = ?';
                    } else {
                        questionText = num1 + ' ' + operation + ' ' + num2 + ' = ?';
                    }
                } else {
                    questionText = num1 + ' ' + operation + ' ' + num2 + ' = ?';
                }

                var options = [];
                for (var i = 0; i < 4; i++) {
                    if (i === 0) {
                        options.push(result);
                        correctOptionIndex = i;
                    } else {
                        var randomOption;
                        do {
                            randomOption = Math.floor(Math.random() * 100);
                        } while (randomOption === result || options.includes(randomOption));
                        options.push(randomOption);
                    }
                }

                options = shuffleArray(options);

                if (options.includes(result)) {
                    break;
                }
            }

            document.getElementById('question').innerText = questionText;

            var optionsDiv = document.getElementById('options');
            optionsDiv.innerHTML = '';
            for (var i = 0; i < 4; i++) {
                var input = document.createElement('input');
                input.type = 'radio';
                input.name = 'answer';
                input.value = options[i];
                input.id = 'option' + i;
                optionsDiv.appendChild(input);

                var label = document.createElement('label');
                label.htmlFor = 'option' + i;
                label.innerText = options[i];
                optionsDiv.appendChild(label);
                optionsDiv.appendChild(document.createElement('br'));
            }

            document.getElementById('feedback').innerText = '';
            document.getElementById('error').innerText = '';

            startTimer();
            updateStats();
        }

        function checkAnswer() {
            var selectedOption = document.querySelector('input[name="answer"]:checked');
            if (!selectedOption) {
                alert('请选择一个答案！');
                return;
            }

            stopTimer();

            var endTime = new Date().getTime();
            var answerTime = (endTime - startTime) / 1000;

            if (parseInt(selectedOption.value) === currentQuestion.result) {
                correctCount++;
                document.getElementById('feedback').innerText = '回答正确！';

                if (answerTime < fastestTime) {
                    fastestTime = answerTime;
                    document.getElementById('fastestTime').innerText = fastestTime.toFixed(2);
                }

                var confetti = document.getElementById('confetti');
                confetti.style.display = 'flex';
                setTimeout(() => {
                    confetti.style.display = 'none';
                    generateQuestion(); // 2秒后生成下一题
                }, 2000);
            } else {
                wrongCount++;
                document.getElementById('error').innerText = '回答错误，请重新选择正确答案。';

                var sadface = document.getElementById('sadface');
                sadface.style.display = 'flex';
                setTimeout(() => {
                    sadface.style.display = 'none';
                }, 2000);
            }

            totalTime += answerTime;
            questionCount++;
            updateStats();
        }

        function showHint() {
            document.getElementById('feedback').innerText = '正确答案是：' + currentQuestion.result;
        }

        function shuffleArray(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
            return array;
        }

        function updateStats() {
            document.getElementById('correctCount').innerText = correctCount;
            document.getElementById('wrongCount').innerText = wrongCount;
            document.getElementById('fastestTime').innerText = fastestTime === Infinity ? '-' : fastestTime.toFixed(2);
            document.getElementById('averageTime').innerText = (totalTime / questionCount).toFixed(2);
        }

        // 初始化生成第一道题
        generateQuestion();
    </script>
</body>
</html>